<template>
    <div style="overflow: hidden">
        <div class="content1">
            <div style="width: 100%">
                <el-row type="flex" justify="center">
                    <el-col :span="24" type="flex" justify="center">
                        <el-button @click="full" class="fullbtn">{{ fullscreen ? '退出全屏' : '全屏显示' }}</el-button>
                        <p style="margin-right: 100px">{{ this.allData.currentYear }}年固井大数据</p>
                    </el-col>
                </el-row>
            </div>

            <div class="top_div">
                <div>
                    <p class="top_lable1">本年度完钻数</p>
                    <p class="top_num1">{{ allData.finishDrillNum }}</p>
                </div>
                <div>
                    <p class="top_lable1">本年度完井数</p>
                    <p class="top_num1">{{ allData.finishWellNum }}</p>
                </div>
                <div>
                    <p class="top_lable1">井身质量行标合格数</p>
                    <p class="top_num1">{{ allData.wellQualityLineMarkQualifiedNum }}</p>
                </div>
                <div>
                    <p class="top_lable1">井身质量红线合格数</p>
                    <p class="top_num1">{{ allData.wellQualitySevenRedLineQualifiedNum }}</p>
                </div>
                <div>
                    <p class="top_lable1">固井质量行标合格数</p>
                    <p class="top_num1">{{ allData.cementQualityLineMarkQualifiedNum }}</p>
                </div>
                <div>
                    <p class="top_lable1">固井质量红线合格数</p>
                    <p class="top_num1">{{ allData.cementQualitySevenRedLineQualifiedNum }}</p>
                </div>
            </div>
            <div class="table_div">
                <!-- 钻探公司各部门完成情况 -->
                <div id="t7" style="width: 35%; margin-right: 3%; margin-top: 10px"></div>

                <div style="display: flex; align-items: center; width: 60%">
                    <!-- 月度完成情况 -->
                    <div id="t2" style="width: 60%"></div>
                    <!-- 时间对比直方图 -->
                    <div id="t1" style="width: 39%"></div>
                </div>
                <!-- 建设单位各部门完成情况 -->
                <div id="t4" style="width: 35%; margin-right: 3%"></div>
                <div style="display: flex; align-items: center; width: 60%">
                    <!-- 井型 -->
                    <div id="t3" style="width: 33%"></div>
                    <!-- 井别 -->
                    <div id="t5" style="width: 33%"></div>
                    <!-- 油藏 -->
                    <div id="t6" style="width: 33%"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetData } from '../../api/module/bigData';
import VueFullscreen from 'vue-fullscreen';
import Vue from 'vue';
Vue.use(VueFullscreen);
export default {
    data() {
        return {
            fullscreen: false,
            teleport: true,
            pageOnly: false,
            allData: {},
            //完成情况的两个图表自适应高度
            autoheight1: '',
            autoheight2: '',
            // 各类时间统计
            option1: {
                title: {
                    show: true,
                    text: '各类时间统计',
                    top: '2%',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontSize: this.FontChart(1.6),
                        fontFamily: 'Courier New',
                        fontWeight: 600
                    }
                },

                xAxis: {
                    type: 'category',
                    data: ['生产时间', '事故时间', '复杂情况处理时间'],
                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontSize: this.FontChart(1.3)
                        }
                    }
                },
                yAxis: {
                    name: '(万小时)',
                    type: 'value',
                    nameTextStyle: {
                        color: 'rgb(240,240,240)',
                        fontSize: this.FontChart(1.3),
                        align: 'center'
                    },
                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,
                        textStyle: {
                            color: 'rgb(240,240,240)'
                        }
                    }
                },
                //选中悬浮显示数据
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'none' },

                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value.toFixed(2) + '(万小时)';
                    }
                },

                series: [
                    {
                        data: [],
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                //柱状颜色不同
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#91c7ae', '#c23531', '#d48265', '#557577', '#61a0a8', '#d48265'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }
                ]
            },
            //年度完成情况
            option2: {
                title: {
                    show: true,
                    text: '年度完成情况',

                    top: '2%',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontSize: this.FontChart(1.6),
                        fontFamily: 'Courier New',
                        fontWeight: 600
                    }
                },
                //选中悬浮显示数据
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'none' },

                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontSize: this.FontChart(1.3)
                        }
                    }
                },
                yAxis: {
                    name: '(个)',
                    type: 'value',
                    nameTextStyle: {
                        color: 'rgb(240,240,240)',
                        fontSize: this.FontChart(1.3),
                        align: 'right'
                    },

                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,

                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontSize: this.FontChart(1.3)
                        }
                    }
                },
                series: [
                    {
                        textStyle: {
                            color: 'white',
                            fontSize: this.FontChart(1.3)
                        },
                        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: 'rgb(35, 196, 215)', //改变折线点的颜色
                                lineStyle: {
                                    color: 'rgb(87,265,163)' //改变折线颜色
                                }
                            }
                        }
                    }
                ]
            },
            //井型
            option3: {
                title: {
                    show: true,
                    text: '井型类型',
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontSize: this.FontChart(1.7),
                        fontFamily: 'Courier New',
                        fontWeight: 600
                    }
                },

                tooltip: {
                    trigger: 'item'
                },

                color: [
                    '#91c7ae',
                    '#c23531',
                    '#191970',
                    '#557577',
                    'rgb(0,150,136)',
                    '#9370DB',
                    '#61a0a8',
                    '#d48265',
                    '#DCDCDC',
                    '#800000',
                    '#CD853F',
                    '#006400',
                    '#40E0D0',
                    '#9EA9A2'
                ],

                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        // avoidLabelOverlap: true, //标签不重叠
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: 'rgb(15, 29, 64)',
                            borderWidth: 4
                        },
                        label: {
                            // normal: {
                            //     position: 'ouside' // 设置标签向外
                            // },
                            show: false,
                            position: 'center',
                            formatter: '{b}\n\n{d}%',
                            textStyle: {
                                color: 'rgb(240,240,240)',
                                fontSize: this.FontChart(1.5),
                                fontFamily: 'Courier New'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: this.FontChart(1.5),
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: [
                            { value: 33, name: '井型数' }
                            // { value: 1, name: '不合格数' }
                        ]
                    }
                ]
            },
            //建设单位各部门完成情况
            option4: {
                title: {
                    text: '建设单位各部门完成情况',
                    subtext: '来自统计数据',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontFamily: 'Courier New',
                        fontSize: this.FontChart(1.5),
                        fontWeight: 600
                    },
                    top: '2%',
                    left: '6%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                legend: {
                    top: '2%',
                    left: '50%',
                    data: ['红线合格数', '完成井数'],
                    itemStyle: {
                        normal: {
                            color: '#61a0a8'
                        }
                    },
                    textStyle: {
                        color: 'rgb(240,240,240)',
                        fontSize: this.FontChart(1.3),
                        fontFamily: 'Courier New'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontFamily: 'Courier New',
                            fontSize: this.FontChart(1.2),
                            fontWeight: 600
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    //data: ['井下', '川北气矿', '重庆气矿', '川西', '川东'],
                    data: this.oilCompany,
                    axisLabel: {
                        //文本长度限制
                        formatter: function (params) {
                            var newParamsName = ''; // 最终拼接成的字符串
                            var paramsNameNumber = params.length; // 实际标签的个数
                            var provideNumber = 6; // 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = ''; // 表示每一次截取的字符串
                                    var start = p * provideNumber; // 开始截取的位置
                                    var end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + '\n';
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName;
                        },
                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontFamily: 'Courier New',
                            fontSize: this.FontChart(1.1),
                            fontWeight: 400
                        }
                    }
                },
                color: ['rgb(0,165,149)', 'rgb(37,105,215)'],
                series: [
                    {
                        name: '红线合格数',
                        textStyle: {
                            fontSize: 100
                        },
                        type: 'bar',
                        //data: [60, 140, 180, 320, 350],
                        data: this.oilNum,
                        barWidth: this.FontChart(1)
                    },
                    {
                        name: '完成井数',
                        textStyle: {
                            fontSize: 100
                        },
                        type: 'bar',
                        //data: [60, 140, 180, 320, 350],
                        data: [],
                        barWidth: this.FontChart(1)
                    }
                ]
            },
            //井别
            option5: {
                title: {
                    show: true,
                    text: '井别类型',
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontSize: this.FontChart(1.7),
                        fontFamily: 'Courier New',
                        fontWeight: 600
                    }
                },

                tooltip: {
                    trigger: 'item'
                },
                color: [
                    'rgb(0,150,136)',
                    '#9370DB',
                    '#61a0a8',
                    '#d48265',
                    '#DCDCDC',
                    '#800000',
                    '#CD853F',
                    '#006400',
                    '#40E0D0',
                    '#9EA9A2',
                    '#91c7ae',
                    '#c23531',
                    '#191970',
                    '#557577'
                ],

                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: 'rgb(15, 29, 64)',
                            borderWidth: 4
                        },
                        label: {
                            show: false,
                            position: 'center',
                            formatter: '{b}\n\n{d}%',
                            textStyle: {
                                color: 'rgb(240,240,240)',
                                fontSize: this.FontChart(1.5),
                                fontFamily: 'Courier New'
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: this.FontChart(1.5),
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: []
                    }
                ]
            },
            //油藏
            option6: {
                title: {
                    show: true,
                    text: '油藏类型',
                    top: '5%',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontSize: this.FontChart(1.7),
                        fontFamily: 'Courier New',
                        fontWeight: 600
                    }
                },

                tooltip: {
                    trigger: 'item'
                },
                color: [
                    'rgb(0,150,136)',
                    '#9370DB',
                    '#9EA9A2',
                    '#91c7ae',
                    '#c23531',
                    '#191970',
                    '#557577',
                    '#61a0a8',
                    '#d48265',
                    '#DCDCDC',
                    '#800000',
                    '#CD853F',
                    '#006400',
                    '#40E0D0'
                ],
                //标签
                // legend: {
                //     x: 'center', //可设定图例在左、右、居中
                //     y: 'bottom',

                //     textStyle: {
                //         color: 'rgb(240,240,240)',
                //         fontSize: this.FontChart(0.5),
                //         fontFamily: 'Courier New'
                //     }
                // },

                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: 'rgb(15, 29, 64)',
                            borderWidth: 4
                        },
                        label: {
                            show: false,
                            position: 'center',
                            formatter: '{b}\n\n{d}%',

                            textStyle: {
                                color: 'rgb(240,240,240)',
                                fontSize: this.FontChart(1.5),
                                fontFamily: 'Courier New'
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: this.FontChart(1.5),
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: []
                    }
                ]
            },
            //钻探公司各部门完成情况
            option7: {
                title: {
                    text: '钻探公司各部门完成情况',
                    subtext: '来自统计数据',
                    textStyle: {
                        color: 'rgb(35, 196, 215)',
                        fontFamily: 'Courier New',
                        fontSize: this.FontChart(1.5),
                        fontWeight: 600
                    },
                    top: '2%',
                    left: '6%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                legend: {
                    top: '2%',
                    left: '50%',
                    data: ['红线合格数', '完成井数'],
                    itemStyle: {
                        normal: {
                            color: '#61a0a8'
                        }
                    },
                    textStyle: {
                        color: 'rgb(240,240,240)',
                        fontSize: this.FontChart(1.3),
                        fontFamily: 'Courier New'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontFamily: 'Courier New',
                            fontSize: this.FontChart(1.2),
                            fontWeight: 600
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    //data: ['井下', '川北气矿', '重庆气矿', '川西', '川东'],
                    data: [],
                    axisLabel: {
                        //文本长度限制
                        formatter: function (params) {
                            var newParamsName = ''; // 最终拼接成的字符串
                            var paramsNameNumber = params.length; // 实际标签的个数
                            var provideNumber = 6; // 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = ''; // 表示每一次截取的字符串
                                    var start = p * provideNumber; // 开始截取的位置
                                    var end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + '\n';
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName;
                        },

                        //修改坐标系字体颜色
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: 'rgb(240,240,240)',
                            fontFamily: 'Courier New',
                            fontSize: this.FontChart(1.1),
                            fontWeight: 400
                        }
                    }
                },
                color: ['rgb(0,165,149)', 'rgb(37,105,215)'],
                series: [
                    {
                        name: '红线合格数',
                        type: 'bar',
                        //data: [60, 140, 180, 320, 350],
                        data: [],
                        barWidth: this.FontChart(1)
                    },
                    {
                        name: '完成井数',
                        type: 'bar',
                        //data: [60, 140, 180, 320, 350],
                        data: [],
                        barWidth: this.FontChart(1)
                    }
                ]
            }
        };
    },
    computed: {},
    created() {
        this.GetData();
    },
    mounted() {
        this.init();
    },
    methods: {
        full() {
            this.$fullscreen.toggle(this.$el.querySelector('.content1'), {
                teleport: this.teleport,
                callback: (isFullscreen) => {
                    this.fullscreen = isFullscreen;
                }
            });
            this.fullscreen = !this.fullscreen;
            //全屏后修改大小，不请求数据
            //油厂图表数据
            let oilCompany = new Array();
            let oilNum = new Array();
            let oilNum2 = new Array();
            this.allData.oilExtractionFactories.forEach((element) => {
                oilCompany.push(element.oilExtractionFactoryName);
                oilNum.push(element.cementQualitySevenRedLineQualifiedNum);
                oilNum2.push(element.finishWellNum);
            });

            this.option4.yAxis.data = oilCompany;
            this.option4.series[0].data = oilNum;
            this.option4.series[1].data = oilNum2;
            let countCharte = this.$echarts.init(document.getElementById('t4'));
            this.autoheight1 = oilCompany.length * this.FontChart(3.5) + 50;
            countCharte.resize({ height: this.autoheight1 });
            countCharte.setOption(this.option4);

            //钻探公司图表数据
            let drillCompany = new Array();
            let drillNum = new Array();
            let drillNum2 = new Array();
            this.allData.drillingCompanies.forEach((element) => {
                drillCompany.push(element.drillingCompanyName);
                drillNum.push(element.cementQualitySevenRedLineQualifiedNum);
                drillNum2.push(element.finishWellNum);
            });

            this.option7.yAxis.data = drillCompany;
            this.option7.series[0].data = drillNum;
            this.option7.series[1].data = drillNum2;
            countCharte = this.$echarts.init(document.getElementById('t7'));
            //根据公司数量自动高度
            this.autoheight2 = drillCompany.length * this.FontChart(3.5) + 50;
            countCharte.resize({ height: this.autoheight2 });
            countCharte.setOption(this.option7);

            //右边图表高度，根据左边自适应
            let otherHeight;
            otherHeight = (this.autoheight1 + this.autoheight2) / 2;

            //井型图表数据

            let wellTypeEchart = [];
            this.allData.wellTypeNumInfos.forEach((item) => {
                wellTypeEchart.push({
                    value: item.wellTypeNums,
                    name: item.wellTypeName
                });
            });
            this.option3.series[0].data = wellTypeEchart;
            countCharte = this.$echarts.init(document.getElementById('t3'));
            countCharte.resize({ height: otherHeight });
            countCharte.setOption(this.option3);
            //井别图表数据
            let wellCaEchart = [];
            this.allData.wellCategoryNumInfos.forEach((item) => {
                wellCaEchart.push({
                    value: item.wellCategoryNums,
                    name: item.wellCategoryNames
                });
            });
            this.option5.series[0].data = wellCaEchart;

            countCharte = this.$echarts.init(document.getElementById('t5'));
            countCharte.resize({ height: otherHeight });
            countCharte.setOption(this.option5);

            //油藏图表数据

            let oilEchart = [];
            this.allData.reservoirTypeNumInfos.forEach((item) => {
                oilEchart.push({
                    value: item.reservoirTypeNums,
                    name: item.reservoirTypeName
                });
            });
            this.option6.series[0].data = oilEchart;

            countCharte = this.$echarts.init(document.getElementById('t6'));
            countCharte.resize({ height: otherHeight });
            countCharte.setOption(this.option6);
            otherHeight = (this.autoheight1 + this.autoheight2) / 2.5;
            //月度完成情况
            this.option2.series[0].data = this.allData.finishWellNumberOfPerMonth;

            countCharte = this.$echarts.init(document.getElementById('t2'));
            otherHeight = otherHeight.toFixed(1);
            //   countCharte = this.$echarts.init(document.getElementById('t2'));
            countCharte.resize({ height: otherHeight });
            countCharte.setOption(this.option2);

            //时间对比

            let timeArr = new Array();
            timeArr.splice(
                0,
                0,
                this.allData.productionTime.toFixed(2),
                this.allData.accidentTime.toFixed(2),
                this.allData.complexSituationHandleTime.toFixed(2)
            );
            timeArr.forEach((item, i) => {
                item = item / 10000;
                timeArr[i] = item;
            });
            this.option1.series[0].data = timeArr;
            // countCharte = this.$echarts.init(document.getElementById('t1'));
            //  otherHeight=countCharte.width

            countCharte = this.$echarts.init(document.getElementById('t1'));
            countCharte.resize({ height: otherHeight });
            countCharte.setOption(this.option1);
        },
        GetData() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            GetData()
                .then((res) => {
                    this.allData = res.data;
                    console.log('allData:', this.allData);

                    //油厂图表数据
                    let oilCompany = new Array();
                    let oilNum = new Array();
                    let oilNum2 = new Array();
                    this.allData.oilExtractionFactories.forEach((element) => {
                        oilCompany.push(element.oilExtractionFactoryName);
                        oilNum.push(element.cementQualitySevenRedLineQualifiedNum);
                        oilNum2.push(element.finishWellNum);
                    });

                    this.option4.yAxis.data = oilCompany;
                    this.option4.series[0].data = oilNum;
                    this.option4.series[1].data = oilNum2;
                    let countCharte = this.$echarts.init(document.getElementById('t4'));
                    this.autoheight1 = oilCompany.length * this.FontChart(3.5) + 50;
                    countCharte.resize({ height: this.autoheight1 });
                    countCharte.setOption(this.option4);

                    //钻探公司图表数据
                    let drillCompany = new Array();
                    let drillNum = new Array();
                    let drillNum2 = new Array();
                    this.allData.drillingCompanies.forEach((element) => {
                        drillCompany.push(element.drillingCompanyName);
                        drillNum.push(element.cementQualitySevenRedLineQualifiedNum);
                        drillNum2.push(element.finishWellNum);
                    });

                    this.option7.yAxis.data = drillCompany;
                    this.option7.series[0].data = drillNum;
                    this.option7.series[1].data = drillNum2;
                    countCharte = this.$echarts.init(document.getElementById('t7'));
                    //根据公司数量自动高度
                    this.autoheight2 = drillCompany.length * this.FontChart(3.5) + 50;
                    countCharte.resize({ height: this.autoheight2 });
                    countCharte.setOption(this.option7);

                    //右边图表高度，根据左边自适应
                    let otherHeight;
                    otherHeight = (this.autoheight1 + this.autoheight2) / 2;

                    //井型图表数据

                    let wellTypeEchart = [];
                    this.allData.wellTypeNumInfos.forEach((item) => {
                        wellTypeEchart.push({
                            value: item.wellTypeNums,
                            name: item.wellTypeName
                        });
                    });
                    this.option3.series[0].data = wellTypeEchart;
                    countCharte = this.$echarts.init(document.getElementById('t3'));
                    countCharte.resize({ height: otherHeight });
                    countCharte.setOption(this.option3);
                    //井别图表数据
                    let wellCaEchart = [];
                    this.allData.wellCategoryNumInfos.forEach((item) => {
                        wellCaEchart.push({
                            value: item.wellCategoryNums,
                            name: item.wellCategoryNames
                        });
                    });
                    this.option5.series[0].data = wellCaEchart;

                    countCharte = this.$echarts.init(document.getElementById('t5'));
                    countCharte.resize({ height: otherHeight });
                    countCharte.setOption(this.option5);

                    //油藏图表数据

                    let oilEchart = [];
                    this.allData.reservoirTypeNumInfos.forEach((item) => {
                        oilEchart.push({
                            value: item.reservoirTypeNums,
                            name: item.reservoirTypeName
                        });
                    });
                    this.option6.series[0].data = oilEchart;

                    countCharte = this.$echarts.init(document.getElementById('t6'));
                    countCharte.resize({ height: otherHeight });
                    countCharte.setOption(this.option6);
                    otherHeight = (this.autoheight1 + this.autoheight2) / 2.5;
                    //月度完成情况
                    this.option2.series[0].data = this.allData.finishWellNumberOfPerMonth;

                    countCharte = this.$echarts.init(document.getElementById('t2'));
                    otherHeight = otherHeight.toFixed(1);
                    //   countCharte = this.$echarts.init(document.getElementById('t2'));
                    countCharte.resize({ height: otherHeight });
                    countCharte.setOption(this.option2);

                    //时间对比

                    let timeArr = new Array();
                    timeArr.splice(
                        0,
                        0,
                        this.allData.productionTime.toFixed(2),
                        this.allData.accidentTime.toFixed(2),
                        this.allData.complexSituationHandleTime.toFixed(2)
                    );
                    timeArr.forEach((item, i) => {
                        item = item / 10000;
                        timeArr[i] = item;
                    });
                    this.option1.series[0].data = timeArr;
                    // countCharte = this.$echarts.init(document.getElementById('t1'));
                    //  otherHeight=countCharte.width

                    countCharte = this.$echarts.init(document.getElementById('t1'));
                    countCharte.resize({ height: otherHeight });
                    countCharte.setOption(this.option1);

                    loading.close();
                })
                .catch((err) => {
                    console.log('查询所有数据错误');
                    console.log(err);
                });
        },
        //res转换成px,echart自适应字体用的
        FontChart(res) {
            //获取到屏幕的宽度
            var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return; //报错拦截：
            let fontSize = 10 * (clientWidth / 1920);
            return res * fontSize;
        }
    }
};
</script>

<style less >
.fullbtn {
    float: left;
    width: 80px;
    background-color: transparent;
    margin: 1px;
    border: transparent(0.5);
}
p {
    box-sizing: content-box;
    padding: 10px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0.2vw;
    font-size: 1.8vw;
    font-weight: bold;
    color: rgba(240, 240, 240, 0.927);
}
.content1 {
    background-color: rgb(15, 29, 64);
    height: 100%;
    width: 102%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* overflow-y: scroll; */
    overflow-x: hidden;
    padding: -10px;
}
.top_div {
    border: 1px solid rgba(240, 240, 240, 0.877);
    width: 100%;
    padding: 5px;
    margin-left: 50px;
    margin-right: 55px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.top_num1 {
    font-size: 1.2vw;
    letter-spacing: 0.1vw;
}
.top_lable1 {
    font-size: 1vw;
    letter-spacing: 0vw;
    color: rgb(35, 196, 215);
}
.table_div {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    font-size: 1rem;
}
::-webkit-scrollbar-thumb {
    background: #419be3;
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background: #021c75;
}
</style>
